<template>
    <div ref="chartRef" class="chart"></div>
</template>

<script lang="ts" setup>
import {onMounted, ref} from "vue";
import * as echarts from 'echarts';
import {usePipeStore} from "../../../store/pipe";

let option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      type: 'pie',
      radius: ['50%', '40%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 18,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [

      ]
    }
  ]
};
// 警告
const pipeStore = usePipeStore()
// 总警告
let countAlarm = 0
pipeStore.pipeData.forEach(item => countAlarm += (item.redAlarm + item.yellowAlarm))
pipeStore.countAlarm = countAlarm

// 压力报警
let pressureAlarm = 0
let pressure = pipeStore.pipeData.filter(item => item.name === '压力计')
pressureAlarm += (pressure[0].redAlarm + pressure[0].yellowAlarm)
pipeStore.pressureAlarm = pressureAlarm

// 流量报警
let flowAlarm = 0
let flow = pipeStore.pipeData.filter(item => item.name === '流量计')
flowAlarm += (flow[0].redAlarm + flow[0].yellowAlarm)
pipeStore.flowAlarm = flowAlarm

// 水质报警
let waterAlarm = 0
let water = pipeStore.pipeData.filter(item => item.name === '水质传感器')
waterAlarm += (water[0].redAlarm + water[0].yellowAlarm)
pipeStore.waterAlarm = waterAlarm

interface Num {
  num: Array<number>
}
const num = defineProps<Num>()
if (num.num[0] === 1) {
  option.series[0].data = [{value: countAlarm, name: "总数"}] as any
}else if (num.num[0] === 2){
  option.series[0].data = [{value: countAlarm, name: "总数"},{value: pressureAlarm, name: "压力报警"}] as any
}else if (num.num[0] === 3) {
  option.series[0].data = [{value: countAlarm, name: "总数"},{value: flowAlarm, name: "流量报警"}] as any
}else {
  option.series[0].data = [{value: countAlarm, name: "总数"},{value: waterAlarm, name: "水质报警"}] as any
}



const chartRef = ref<HTMLDivElement|null>(null)
onMounted(() => {
  if(chartRef.value){
    let myChart = echarts.init(chartRef.value as HTMLDivElement);
    myChart.setOption(option)
  }
})
</script>

<style scoped>
.chart {
  height: 200px;
  width: 190px;
}

</style>